import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useCallback, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  StatusBar,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  Keyboard,
  TouchableWithoutFeedback,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import FastImage from '@d11/react-native-fast-image';
import IconBack from '@svgs/icon_header_back.svg';

import HeaderBar from '@/components/headerBar';
import { RootStackParamList } from '@/types/navigation';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

// Mock data for the celebrity list
const celebrityData = [
  {
    id: '1',
    name: 'Elon Musk',
    description: 'Tech Entrepreneur',
    imageUrl: 'https://picsum.photos/id/1/200',
  },
  {
    id: '2',
    name: 'Taylor Swift',
    description: 'Singer & Songwriter',
    imageUrl: 'https://picsum.photos/id/2/200',
  },
  {
    id: '3',
    name: 'Tom Cruise',
    description: 'Actor',
    imageUrl: 'https://picsum.photos/id/3/200',
  },
  {
    id: '4',
    name: 'Emma Watson',
    description: 'Actress & Activist',
    imageUrl: 'https://picsum.photos/id/4/200',
  },
];

// Suggestions for birthday messages
const suggestionsList = [
  'Happy birthday! Wishing you an amazing day filled with joy and laughter!',
  'Another year older, another year wiser. Happy birthday!',
];

const BirthdayWishes = () => {
  const insets = useSafeAreaInsets();
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const [selectedCelebrity, setSelectedCelebrity] = useState<string | null>(null);
  const [birthdayMessage, setBirthdayMessage] = useState('');

  const handleBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  const handleCelebritySelect = useCallback((celebrityId: string) => {
    setSelectedCelebrity(celebrityId);
  }, []);

  const handleSuggestionPress = useCallback((suggestion: string) => {
    setBirthdayMessage(suggestion);
  }, []);

  const handlePreview = useCallback(() => {
    if (selectedCelebrity && birthdayMessage) {
      navigation.navigate('PreviewExport', {
        videoUrl: 'https://example.com/sample-video.mp4', // This would be the actual generated video URL
        message: birthdayMessage,
      });
    }
  }, [selectedCelebrity, birthdayMessage, navigation]);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <StatusBar backgroundColor="#F6FCFF" barStyle="dark-content" />

      {/* Header */}
      <HeaderBar title="Birthday Wishes" leftIcon={<IconBack />} onBack={handleBack} />

      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <ScrollView
            style={styles.scrollView}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{ paddingBottom: pxToVh(80) }} // Add padding for button
          >
            {/* Description */}
            <Text style={styles.description}>Create a personalized birthday message from your favorite celebrity</Text>

            {/* Celebrity Selection Section */}
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>Choose a Celebrity</Text>

              <ScrollView
                horizontal
                showsHorizontalScrollIndicator={false}
                contentContainerStyle={styles.celebrityScrollContent}
              >
                {celebrityData.map((celebrity) => (
                  <TouchableOpacity
                    key={celebrity.id}
                    style={[styles.celebrityItem, selectedCelebrity === celebrity.id && styles.selectedCelebrityItem]}
                    onPress={() => handleCelebritySelect(celebrity.id)}
                  >
                    <FastImage source={{ uri: celebrity.imageUrl }} style={styles.celebrityImage} resizeMode="cover" />
                    <Text style={styles.celebrityName}>{celebrity.name}</Text>
                    <Text style={styles.celebrityDescription}>{celebrity.description}</Text>
                  </TouchableOpacity>
                ))}
              </ScrollView>
            </View>

            {/* Birthday Message Section */}
            <View style={styles.section}>
              <View style={styles.messageHeaderContainer}>
                <Text style={styles.sectionTitle}>Birthday Message</Text>
                <Text style={styles.characterCount}>{birthdayMessage.length}/500 characters</Text>
              </View>

              <View style={styles.inputContainer}>
                <TextInput
                  style={styles.textInput}
                  placeholder="Enter your birthday message here..."
                  placeholderTextColor="#94A3B8"
                  multiline
                  value={birthdayMessage}
                  onChangeText={setBirthdayMessage}
                  maxLength={500}
                />
              </View>

              {/* Suggestions */}
              <View style={styles.suggestionsContainer}>
                <Text style={styles.suggestionsTitle}>Suggestions</Text>
                {suggestionsList.map((suggestion, index) => (
                  <TouchableOpacity
                    key={index}
                    style={styles.suggestionItem}
                    onPress={() => handleSuggestionPress(suggestion)}
                  >
                    <Text style={styles.suggestionText}>{suggestion}</Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>
          </ScrollView>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>

      {/* Preview Button - Fixed at bottom */}
      <View style={[styles.buttonContainer, { paddingBottom: insets.bottom || pxToVh(20) }]}>
        <TouchableOpacity
          style={[styles.previewButton, (!selectedCelebrity || !birthdayMessage) && styles.disabledButton]}
          onPress={handlePreview}
          disabled={!selectedCelebrity || !birthdayMessage}
          activeOpacity={0.8}
        >
          <Text style={styles.previewButtonText}>Preview</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F6FCFF',
  },
  scrollView: {
    flex: 1,
    paddingHorizontal: pxToVw(20),
  },
  description: {
    fontSize: pxToVh(16),
    color: '#475569',
    marginTop: pxToVh(10),
    marginBottom: pxToVh(20),
  },
  section: {
    marginBottom: pxToVh(25),
  },
  sectionTitle: {
    fontSize: pxToVh(18),
    fontWeight: '600',
    color: '#1E293B',
    marginBottom: pxToVh(15),
  },
  celebrityScrollContent: {
    paddingRight: pxToVw(20),
  },
  celebrityItem: {
    width: pxToVw(120),
    marginRight: pxToVw(15),
    backgroundColor: '#FFFFFF',
    borderRadius: 15,
    padding: pxToVw(15),
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'transparent',
  },
  selectedCelebrityItem: {
    borderColor: '#3B82F6',
  },
  celebrityImage: {
    width: pxToVw(80),
    height: pxToVw(80),
    borderRadius: pxToVw(40),
    marginBottom: pxToVh(10),
  },
  celebrityName: {
    fontSize: pxToVh(16),
    fontWeight: '600',
    color: '#1E293B',
    textAlign: 'center',
  },
  celebrityDescription: {
    fontSize: pxToVh(14),
    color: '#475569',
    textAlign: 'center',
    marginTop: pxToVh(5),
  },
  messageHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: pxToVh(10),
  },
  characterCount: {
    fontSize: pxToVh(14),
    color: '#94A3B8',
  },
  inputContainer: {
    backgroundColor: '#FFFFFF',
    borderRadius: 15,
    padding: pxToVw(15),
    marginBottom: pxToVh(15),
  },
  textInput: {
    height: pxToVh(100),
    fontSize: pxToVh(16),
    color: '#1E293B',
    padding: 0,
    textAlignVertical: 'top',
  },
  suggestionsContainer: {
    marginTop: pxToVh(10),
  },
  suggestionsTitle: {
    fontSize: pxToVh(16),
    fontWeight: '500',
    color: '#1E293B',
    marginBottom: pxToVh(10),
  },
  suggestionItem: {
    backgroundColor: '#FFFFFF',
    borderRadius: 10,
    padding: pxToVw(12),
    marginBottom: pxToVh(10),
  },
  suggestionText: {
    fontSize: pxToVh(14),
    color: '#475569',
  },
  buttonContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    paddingHorizontal: pxToVw(20),
    paddingTop: pxToVh(10),
    backgroundColor: '#F6FCFF',
    borderTopWidth: 1,
    borderTopColor: '#E2E8F0',
  },
  previewButton: {
    backgroundColor: '#3B82F6',
    borderRadius: 15,
    padding: pxToVh(15),
    alignItems: 'center',
  },
  disabledButton: {
    backgroundColor: '#94A3B8',
  },
  previewButtonText: {
    fontSize: pxToVh(16),
    fontWeight: '600',
    color: '#FFFFFF',
  },
});

export default BirthdayWishes;
